<!-- Created by jack on 2022/4/15 - 15:33 -->
<style scoped lang="less">
.list-box{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  padding-left: 20px;
  user-select: none;
  &__item{
    margin: 0 8px;
    font-size: 14px;
    line-height: 14px;
    color: #a5a5a5;
    transition: all ease-in-out 150ms;
    &:hover{
      color: #787878;
    }
    &-active{
      color: #000;
      font-weight: 500;
    }
  }
}
</style>

<template>
  <div class="list-box">
    <div
        @click="emit('update:value',ele.value)"
        class="list-box__item"
        :class="{ 'list-box__item-active': props.value === ele.value }"
        v-for="(ele ,index) of props.list"
        :key="index"
    >
      {{ ele.name }}
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  list: { type: Array,  default: () => ([])},
  value: { type: String, default: ''},
})
const emit = defineEmits(['update:value'])
</script>
